// 组件中提交数据到Mutaions然后更改状态值最后我们再重新提交给组件二次渲染
import Vue from 'vue'
import Vuex from 'vuex'
import { getbanner } from '@/api' // 引入我们在数据请求模块中定义的异步数据请求的方法

Vue.use(Vuex) // 调用Vuex状态管理器

// 01.设置状态管理器初始值
const store = new Vuex.Store({
  state: { // 这个就是我们项目中所需要用到的数据的状态初始值的地方
    bannerlist: []
  },
  // 02.定义更改初始状态的方法
  mutations: { // 唯一的改变状态的地方
    changeBannerlist (state, data) {
      state.bannerlist = data.payload
    }
  }
})

// 03.异步请求数据后触发更改状态的方法并传参
// 这种方法的话只需要将这个异步操作的方法放在组件中触发即可,我们还可以继续精简我们的代码,整个将异步请求数据的方法都放在actions中,然后只用在组件中直接使用store.dispatch触发这个actions即可了
getbanner().then(res => { // 请求数据成功后调用方法,将异步请求出来的数据赋值给初始状态
  store.commit({ // 对象写法二
    type: 'changeBannerlist',
    payload: res.data.data
  })
})

// 将这个变量暴露出去,这个是再我们的入口文件index.js中已经引入了
export default store
